<template>
  <div>
    <h1>vue指令</h1>
    <!-- 
      vue指令 ： 是一个特殊的html标签属性，，，以v-开头
      v-bind v-on v-if v-else v-for等

      v-bind指令
        用于给标签设置一个动态的属性（值会发生改变）
      
      v-bind:属性="值"
      简写
      属性="值"
      v-bind:属性="值"  简写为  :属性="值"
    -->
    <div id="box" class="box" v-bind:title="msg">我是一个盒子</div>
    <hr>
    <p title="text">{{ text }}</p>
    <p v-bind:title="text">{{ text }}</p>
    <a :href="url">百度一下</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello vue',
      text: '你好',
      url: 'http://www.baidu.com'
    }
  }
}
</script>

<style>

</style>